// pages/kefuwzh/kefuwzh.js
var WxParse = require('../../wxParse/wxParse');
const app =getApp()
Page({
  data: {
    title: "杭州灵隐寺深度游指南",
    userAvatar: "https://c-ssl.dtstatic.com/uploads/item/202003/18/20200318091411_bopif.thumb.400_0.jpg",
    userName: "旅行研究所",
    publishTime: "2023-10-15 10:00",
    content: `
      <p>灵隐寺，中国佛教古寺，又名云林寺，位于浙江省杭州市...</p>
      <img src="https://www.keaitupian.cn/cjpic/frombd/2/253/1659552792/3869332496.jpg" />
      <p>寺内主要由天王殿、大雄宝殿、药师殿等建筑构成...</p>
      <img src="https://i3.3conline.com/images/piclib/201110/17/batch/1/113319/1318814634712l2c0m21v0j.jpg" />
    `, // 注意：WxParse 解析 HTML 时使用 <img> 标签，而非 <image>
    likeCount: 456,
    collectCount: 189,
    showImagePreview: false,
    previewImageUrl: "",
    likeAnimation: null,
    collectAnimation: null,
    shareAnimation: null
  },


// * WxParse.wxParse(bindName , type, data, target,imagePadding)
// * 1.bindName绑定的数据名(必填)
// * 2.type可以为html或者md(必填)
// * 3.data为传入的具体数据(必填)
// * 4.target为Page对象,一般为this(必填)
// * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

onLoad(options) {
  console.log(options.id);
  wx.request({
    url: 'http://localhost:8080/system/recommend/findRecCountByRecId',
      method:"Get",
      header: {
        Authorization: app.globalData.token,
        "Content-type":"application/x-www-form-urlencoded"
      },
      data:{
        recId:options.id
      },
      success: (res) => {
        if (res.data.code === 200) {
          const item = res.data.data;
          this.setData({
            title: item.recTitle,
            userAvatar: item.sysUser.avatar,
            userName: item.sysUser.nickName,
            publishTime: item.recTime,
            content: item.recContent, // 新富文本数据
            likeCount: item.recPraise
          }, () => { // setData 回调中触发解析
            this.parseRichText(); // 确保使用更新后的 content 解析
          });
        }
      }
  })
  // 页面加载完成后调用 WxParse 解析富文本
},

// 解析富文本
parseRichText() {
  const content = this.data.content || '<p>暂无内容</p>';
  const imageUrls = content.match(/<img[^>]+src="([^"]+)"/g) || []; // 提取所有 img 标签的 src
  this.setData({
    imageUrls: imageUrls.map(url => url.match(/src="([^"]+)"/)[1]) // 提取 URL 并去重
  });
  const that = this;
  
  // WxParse 调用参数说明：
  // 1. 'article'：解析后的绑定名称（需与 wxml 中模板引用一致）
  // 2. 'html'：解析类型（支持 HTML 或 MD）
  // 3. content：待解析的内容
  // 4. that：当前页面实例
  // 5. 5：图片左右内边距（可选，单位 rpx）
  WxParse.wxParse('article', 'html', content, that, 5);
},


  // 返回上一页
  onClickLeft() {
    wx.navigateBack();
  },

  // 点赞
  onLike() {
    this.animateAction('like');
    this.setData({
      likeCount: this.data.likeCount + 1
    });
  },

  // 收藏
  onCollect() {
    this.animateAction('collect');
    wx.showToast({
      title: "收藏成功",
      icon: "none",
      duration: 1500
    });
  },

  // 分享
  onShare() {
    this.animateAction('share');
    wx.showActionSheet({
      itemList: ["微信好友", "朋友圈", "QQ好友"],
      success: () => {}
    });
  },

  // 通用动画方法
  animateAction(type) {
    const animation = wx.createAnimation({
      duration: 200,
      timingFunction: "ease-out"
    });

    switch (type) {
      case 'like':
        animation.scale(1.2, 1.2).step();
        this.setData({ likeAnimation: animation.export() });
        break;
      case 'collect':
        animation.rotate(15).scale(1.1, 1.1).step();
        this.setData({ collectAnimation: animation.export() });
        break;
      case 'share':
        animation.translate(5, -5).step();
        this.setData({ shareAnimation: animation.export() });
        break;
    }

    // 动画复原
    setTimeout(() => {
      animation.scale(1).rotate(0).translate(0).step();
      this.setData({
        [type + 'Animation']: animation.export()
      });
    }, 200);
  },

  // 点击富文本图片
  handleImageTap(e) {
    const src = e.target.dataset.src;
    if (src) {
      this.setData({
        showImagePreview: true,
        previewImageUrl: src
      });
    }
  },

  // 关闭图片预览
  onCloseImagePreview() {
    this.setData({
      showImagePreview: false
    });
  }
});